<template>
  <div class="container">
    <search-nav :backDetailUrl="backDetailUrl" :statusBarHeight="statusBarHeight" :color="globalStyle.color2" searchType="buyer"></search-nav>
    <div class="tabs-bar line-size order-tabs"  :style="'background-color:'+globalStyle.color2+';border-bottom: 1px solid ' + globalStyle.color2+';'">
      <div>
        <van-tabs :active="activeIndex" @change="tabClick" color="#f8c400" :border="false">
          <van-tab :title="item" v-for="(item, index) in orderStatusList" :key="index"></van-tab>
        </van-tabs>
      </div>
      <div class="tab-more" @click="tabLayerShow">
        <span>筛选</span>
        <img v-if="fileSpace" class="width-15 height-13 mar-l-2" :src="fileSpace + '/images/home-category.png'" alt="">
      </div>
    </div>
    <!-- <div class="height-39"></div> -->
    <div class="pull-refresh pad-b-4">
      <div v-for="(item, index) in orders" :key="index">
        <div class="order-div mar-b-10 pad-b-10 pad-l-15 pad-r-15">
          <div class="flex v-align-c pad-t-10 pad-b-10">
            <div v-if="item.crossBorderOrderType === 2" class="ordet-type-tag mar-r-5">跨境保税</div>
            <div v-else class="ordet-type-tag mar-r-5">{{item.deliveryTypeText}}</div>
            <label @click="goHome(item.memberId)" class="flex-item">
              <div class="flex v-align-c">
                <span>
                  <span>{{item.storeName}}</span>
                  <span v-if="!getAppInfo.groupBuyAuthority || !getAppInfo.storeHomeAuthority">的店铺</span>
                </span>
                <icon class="iconfont icon-arrow-right font-12 mar-l-6"></icon>
              </div>
            </label>
            <div class="font-orange font-14" :class="'type-' + item.orderStatus" v-if="item.deliveryType ===4 && item.orderStatus ===2">待提货</div>
            <div class="font-orange font-14" :class="'type-' + item.orderStatus" v-else>{{item.curStatusText}}</div>
          </div>
          <div>
            <div class="goods-list-item" v-for="(goods, goodsIndex) in item.orderGoodsList" :key="goodsIndex" @click="queryOrderInfo(item)">
              <div class="barbg pad-t-10 pad-b-10 pad-l-20 pad-r-20 mar-l--20 mar-r--20">
                <div class="flex">
                  <div class="mar-r-10">
                    <img :src="goods.goodsImageUrl" class="img-item"/>
                  </div>
                  <div class="flex-item">
                    <div class="height-81">
                      <div class="goods-title mar-t--2">{{goods.goodsTitle}}</div>                        
                      <div class="height-3"></div>
                      <div v-if="goods.skuDetail" class="goods-prop font-color-9 font-12">{{ goods.skuDetail }}</div>
                      <div v-if="goods.taxAmount && (goods.taxAmount * 1 > 0)" class="goods-prop font-color-crossb font-12">税费：￥{{ goods.taxAmount }}</div>
                    </div>
                    <div class="flex font-13">
                      <div class="font-black flex-item">
                        <div class="flex v-align-c font-16 price-col-n">
                          <span class="flex-item">¥{{ goods.goodsPrice }}</span>
                          <span>×{{ goods.goodsNum }}</span>
                        </div>
                      </div>
                    </div>
                    <!--  退款关闭: -3、4、3（数量全退完）
                        退款：-2、-1、3(数量未退完)、''
                        退款中：0、1、2 -->
                    <div class="flex mar-t-5">
                      <div class="flex-item"></div>
                      <template v-if="urlFrom !== 'myDistribution'">
                        <template v-if="item.orderStatus !== -2 && item.orderStatus !== -1 && item.orderStatus !== 0 && item.orderStatus !== 4">
                          <div @click.stop="linkToDetail(goods)"
                            v-if="!goods.afterSaleGoodsNum && (goods.afterSaleStatus===0 || goods.afterSaleStatus===1 || goods.afterSaleStatus===2 )">
                            <div class="action-btn font-13 mar-b-2">退款中</div>
                          </div>
                          <div class="action-btn font-13 mar-b-2" @click.stop="linkToDetail(goods)"
                            v-else-if="goods.afterSaleStatus===-3 || goods.afterSaleStatus===4 || (goods.afterSaleStatus===3 && (goods.afterSaleGoodsNum <= goods.goodsNum))">退款成功</div>
                        </template>
                      </template>
                    </div>
                  </div>
                </div>
                <div class="border-b-less2 mar-t-8 mar-b--5"></div>
              </div>
              <div class="flex border-b-less pad-t-5 pad-b-3 font-15 mar-b-10" v-if="(item.orderGoodsList.length === 1) || (item.orderGoodsList.length>1 && goodsIndex === item.orderGoodsList.length -1)">
                <span class="flex-item">共{{ item.orderGoodsList ? item.goodsLength : 0 }}件</span>
                <div class="text-align-r">
                  <div>
                    合计：
                    <span class="font-red">
                      <span class="font-11">¥</span>{{ item.orderPrice }}
                    </span>
                  </div>
                  <div class="font-12 mar-t--4" v-if="item.deliveryType === 1">
                    <span>(含</span>
                    <span v-if="item.taxAmount && (item.taxAmount * 1 > 0)">税费¥{{ item.taxAmount }}，</span>
                    <span>运费¥{{ item.freight }}</span>
                    <span>)</span>
                  </div>
                  <div class="font-12 mar-t--4" v-if="item.deliveryType === 5">(含配送费¥{{ goods.deliveryFee ? goods.deliveryFee : '0.00' }})</div>
                </div>
              </div>
            </div>
          </div>
          <div class="flex">
            <div class="flex-item"> </div>
            <div class="mar-r--10">
              <!-- orderStatus 订单状态： -10: 待付货款 -2: 已付款取消 -1: 未付款取消 0: 未付款 1: 已付款 20: 部分发货 2: 已发货 3: 已收货 4: 已完成 -->
              <!-- deliveryNo：针对社区商品、deliveryNo不为空 说明已生成配送单号 就不能再取消 -->
              <!-- cancelFlag 已付款订单是否发起取消 0：否 1：是 -->
              <!-- deliveryType ：1和2 社群分销  3 社区团购  4和5 门店 -->
              <!-- orderFrom 订单归属 1:自营订单 2:分销订单 -->
              <!-- 取消按钮： 显示条件： 待付款、待发货状态下 -->
              <!-- 跨境订单时，并且待发货时，（仓库报关状态 = 申请失败）|| （支付报关状态 = 申请失败） 或者 （仓库报关状态 = 未申报）&& （支付报关状态 = 未申报），这是展示取消订单 -->
              <span v-if="(item.deliveryType ===4 || item.deliveryType ===5) && ((item.orderStatus===0))"
                class="order-btn mar-r-10" @click.stop.prevent="cancelOrder(item)">取消订单</span>
              <span v-if="(item.deliveryType ===3 && !item.deliveryNo) && (item.orderStatus===0 || (item.orderStatus === 1 && item.cancelFlag === 0 && item.orderFrom === 2))"
                class="order-btn mar-r-10" @click.stop.prevent="cancelOrder(item)">取消订单</span>
              <span v-if="((item.deliveryType ===1 || item.deliveryType ===2)) && (item.orderStatus === 0 || (item.crossBorderOrderType !== 2 && item.orderStatus === 1 && item.cancelFlag === 0 && item.orderFrom === 2) || (item.crossBorderOrderType === 2 && item.orderStatus === 1 && ((item.warehouseCustomsStatus === 4 || item.paymentOrderCustomsStatus === 7) || (item.warehouseCustomsStatus === 1 && item.paymentOrderCustomsStatus === 1) ) ))"
                class="order-btn mar-r-10" @click.stop.prevent="cancelOrder(item)">取消订单</span>
              <!-- 查看物流按钮 只有原社群分销商品有： 显示条件： 待收货、已收货、已完成 -->
              <!-- 订单商品类型orderGoodsDeliveryType： 10：微店商品快递配送 11： 微店商品门店自提  20: 分销商品快递配送 30:微店商品+分销商品快递配送 -->
              <span v-if="(item.orderStatus===4 || item.orderStatus===3 || item.orderStatus===2) && item.orderGoodsDeliveryType!==11 && item.deliveryType ===1" class="order-btn mar-r-10"
                      @click.stop.prevent="queryExpress(item)">查看物流
              </span>
              <!-- 分销订单 根据运营总后台客服增值功能来显示和隐藏  customerServiceType客服类型 1：小B客服 2：企业客服-->
              <span class="order-btn mar-r-10 pos-rel" v-if="(item.orderFrom === 2 && enterpriseCustomerServiceAuthority === 1)">
                <!-- 跳企业客服 -->
                <button open-type="contact" class="contactBtn hidden-submit button-icon" v-if="item.customerServiceType === 2"></button>
                <!-- 跳小B客服 -->
                <div class="contactBtn hidden-submit button-icon" v-if="item.customerServiceType === 1"
                @click.stop.prevent="goServiceToB(item)"></div>
                联系客服
              </span>
              <!-- 自营订单 根据小B客服增值功能来显示和隐藏 -->
              <span class="order-btn mar-r-10 pos-rel" v-if="(item.orderFrom === 1 && shopCustomerServiceAuthority === 1)"
                @click.stop.prevent="goServiceToB(item)">
                联系客服
              </span>
              <span v-if="item.orderStatus===0" class="order-btn2 mar-r-10" @click="queryOrderInfo(item)">去付款</span>
              <!-- 确认收货按钮 显示条件 只有物流商品有： 待收货 -->
              <span v-if="(item.orderStatus===2 && (item.deliveryType ===1 || item.deliveryType ===2)) && item.statusOverNum !== item.goodsListLen && item.orderGoodsDeliveryType!==11" 
                class="order-btn2 mar-r-10" @click.stop.prevent="doReceiveGoods(item)" >
                确认收货
              </span>
              <!-- 取货码按钮 显示条件 社区和到店自提商品：待收货  -->
              <span class="order-btn mar-r-10" @click.stop.prevent="getCodeInfo(item)" v-if="(item.deliveryType === 2 || item.deliveryType === 3 || item.deliveryType === 4) && (item.orderStatus === 1 || item.orderStatus ===2) && item.orderGoodsDeliveryType === 11">
                取货码
              </span>
              <!-- 10：微店商品快递配送 11： 微店商品门店自提 20: 分销商品快递配送 30:微店商品+分销商品快递配送 -->
              <!-- <span v-if="(item.orderStatus === 1 || item.orderStatus ===2) && item.orderGoodsDeliveryType === 11" class="order-btn2 mar-r-10" @click.stop.prevent="pickUpEls(item.orderId)">我要取货</span> -->
            </div>
          </div>
        </div>
      </div>
      <div class="pad-10 mar-t-10 align-c" v-if="orders.length===0">
        <img v-if="fileSpace" mode="widthFix" class="width-153 height-75 mar-t-30"
             :src="fileSpace + '/images/2-0-kong.png'"/>
        <div class="pad-t-20 font-14 font-gray">空空如也</div>
      </div>
    </div>

    <!-- 筛选面板 -->
    <div @touchmove.prevent="">
      <van-popup
        :show="tabLayer"
        @close="tabLayer = false"
        position="right"
        custom-style="width: 80%; height: 100%;">
        <div class="popup-layer" style="padding-top:80px">
          <h3>订单类型</h3>
          <ul>
            <li v-for="(item, index) in orderType" :key="index">
              <div class="li-item" :class="{'active': orederCateIndex === index}" @click="changeOrderCate(item, index)">{{item}}</div>
            </li>
          </ul>
          <h3>配送方式</h3>
          <ul>
            <li v-for="(item, index) in orderTypeList" :key="index">
              <div class="li-item" :class="{'active': orederTypeIndex === index}" @click="changeOrderType(index)">{{item}}</div>
            </li>
          </ul>
          <h3>订单状态</h3>
          <ul>
            <li v-for="(item, index) in orderStatusList" :key="index">
              <div class="li-item" @click="changeOrderStatus(index)" :class="{'active': activeIndex === index}">{{item}}</div>
            </li>
          </ul>
          <div class="bottom-btn flex flex-between pad-l-15 pad-r-15" style="position:fixed">
            <div class="reset-btn" @click.stop="resetCondition">重置</div>
            <div class="comfirm-btn" @click.stop="sureSerch">确定</div>
          </div>
        </div>
      </van-popup>
    </div>
    <!-- 二维码 -->
    <div class="code-box">
      <van-popup :round="true" :show="showCodeAlert" @close="showCodeAlert = false">
        <div class="width-300">
          <div class="width-300 height-127 alert-bg pad-t-5 text-align-c" v-if="codeInfo.deliveryType === 3">
            <span class="font-21 font-white font-w">{{appName}}</span>
            <div class="font-12 font-white flex mar-t-1">
              <span class="flex subject" style="margin-left:41px"><span class="dots"></span>货源直采</span>
              <span class="flex subject mar-l-28"><span class="dots"></span>品质保证</span>
              <span class="flex subject mar-l-27"><span class="dots"></span>便宜省心</span>
            </div>
          </div>

          <div v-if="codeInfo.deliveryType === 4" class="flex-col flex-center mar-t-18">
            <span class="font-15 font-color font-w mar-b-17">请向商家出示提货码</span>
            <span class="font-20 font-w">{{codeInfo.verifyId}}</span>
          </div>
          <div class="width-275 height-283 code-area flex-col flex-center" :style="{top: codeInfo.deliveryType === 3 ? '-57px':'15px'}">
            <div v-if="codeInfo.deliveryType === 3" class="pad-t-10 pad-b-10">
              <span class="font-20 font-w">{{codeInfo.verifyId}}</span>
            </div>
            <img class="width-244 height-244" v-if="codeInfo.verifyCode" :src="codeInfo.verifyCode" alt="">
          </div>
          <div v-if="codeInfo.deliveryType === 3" class="font-15 font-color text-align-c remark-text font-w">
            <span>请向团长展示此二维码</span>
          </div>
          <div v-if="codeInfo.deliveryType === 4" class="font-15 font-color text-align-c font-w mar-b-20" style="margin-top:34px">
            <span>请向店主展示此二维码</span>
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
  import SearchNav from '@/components/SearchNav'
  import {
    pageCustomerOrder,
    doReceiveGoods,
    cancelOrder,
    checkCancelPaidOrder
  } from '@/api/personal'
  import { getDict, getAuthority } from '@/api/common'

  export default {
    components: { SearchNav },
    data() {
      return {
        orderStatusList: ['全部', '待付款', '待发货', '待收货', '已收货', '已完成', '已取消'],
        activeIndex: 0,
        showCodeAlert: false,
        userInfo: {},
        orderStatusMap: {},
        orders: [],
        isShowExpressPicker: false,
        pickExpressArray: [],
        pickExpressId: '',
        pickExpressText: '请选择物流',
        isDeliverGoods: false,
        isServiceGoods: false,
        isShowExpress: false,
        orderInfo: {},
        expressInfo: {},
        currentPage: 1,
        pullLoad: {
          loading: false,
          finished: false
        },
        statusBarHeight: 0,
        urlFrom: '',
        statusIs: false, // 区分买家卖家
        globalStyle: {},
        shopCustomerServiceAuthority: 1, // 小B客服增值功能 0关闭 1开启
        enterpriseCustomerServiceAuthority: 1, // 企业客服增值功能 0关闭 1开启
        // customerServiceFlag: 0, // 是否开启客服权限 0：关闭 1：开启
        // customerServiceType: 0 // 客服类型 1：小B客服 2：企业客服
        serviveType: 0, // 客服类型 1：小B客服 2：企业客服
        tabLayer: false,
        orederCateIndex: 0,
        orderType: ['全部', '普通订单', '跨境订单'],
        orderTypeList: ['全部', '门店配送', '门店自提', '社区自提', '物流快递'],
        orederTypeIndex: 0,
        deliveryType: '', // 配送方式 1：物流快递 2: 门店自提 4:社区自提 5:门店配送  门店自提---自营商品
        deliveryTypeArr: ['物流快递', '门店自提', '社区团购', '到店自提', '门店配送'],
        codeInfo: {
          deliveryType: '',
          verifyCode: '',
          verifyId: ''
        },
        appName: '',
        backDetailUrl: '/pages/personal/main',
        getAppInfo: {}
      }
    },
    onLoad() {
      // 初始化data
      Object.assign(this.$data, this.$options.data())
      this.statusBarHeight = this.$pt.getSystemInfoSync()['statusBarHeight'] + 44
    },
    onShow() {
      this.urlFrom = this.getCurrentPage().query.urlFrom
      if (this.$pt.getStorageSync('cbFlag')) {
        this.orderType = ['全部', '普通订单', '跨境订单']
      } else {
        this.orderType = ['全部', '普通订单']
      }
      // 售后页面，返回订单详情时，需获取订单最新的售后状态
      if (this.$pt.getStorageSync('refundType')) {
        this.orders = []
        this.currentPage = 1
        this.initEls()
      }
    },
    mounted() {
      this.initEls()
      let getAppInfo = this.$pt.getStorageSync('appInfo')
      this.getAppInfo = getAppInfo
      this.appName = getAppInfo.appName
      this.globalStyle = getAppInfo.style
      this.appName = getAppInfo.appName
      this.getAuthority()
    },
    onPullDownRefresh() {
      this.currentPage = 1
      this.orders = []
      this.pageUserOrder()
      setTimeout(() => {
        this.$pt.stopPullDownRefresh()
      }, 500)
    },
    onReachBottom() {
      // 触底刷新
      if (!this.pullLoad.finished) {
        this.pageUserOrder()
      }
    },
    methods: {
      // 运营总后台 增值功能权限获取
      getAuthority() {
        getAuthority({enterpriseId: this.getEnterpriseId}).then(res => {
          this.shopCustomerServiceAuthority = res.data.shopCustomerServiceAuthority
          this.enterpriseCustomerServiceAuthority = res.data.enterpriseCustomerServiceAuthority
          this.serviveType = res.data.customerServiceType
        }).catch(err => {
          console.log(err)
        })
      },
      getCodeInfo(item) {
        this.showCodeAlert = true
        this.codeInfo.deliveryType = item['orderGoodsList'][0]['deliveryType']
        this.codeInfo.verifyCode = item['orderGoodsList'][0]['verifyCode']
        this.codeInfo.verifyId = this.codeInfo.deliveryType === 4 || this.codeInfo.deliveryType === 3 ? item['orderGoodsList'][0]['verifyId'] : ''
      },
      // 跳小B客服聊天窗口
      goServiceToB(item) {
        let cId = this.$pt.getStorageSync('customerId')
        let mId = item['memberId']
        if (cId === mId) {
          this.$utils.showToast({
            title: '不能与自己聊天'
          })
        } else {
          this.$pt.navigateTo({url: '/pages/personal/message/detail/main?memberId=' + item.memberId + '&orderId=' + item.orderId + '&orderType=' + item.orderType})
        }
      },
      initEls() {
        this.$pt.removeStorageSync('refundType')
        const type = this.getCurrentPage().query.type
        let personalType = this.$pt.getStorageSync('personalType')
        let detail = this.getCurrentPage().query.detail
        if (personalType === 0 || detail) {
          this.statusIs = false
        } else if (personalType === 1) {
          this.statusIs = true
        }
        switch (type) {
          case 'wPay':
            // 待付款
            this.activeIndex = 1
            break
          case 'wShipped':
            // 待发货
            this.activeIndex = 2
            break
          case 'wReceive':
            // 待收货
            this.activeIndex = 3
            break
        }
        this.getOrderDic()
        this.pageUserOrder()
      },
      linkToDetail(sku) {
        let value = JSON.stringify(sku)
        this.$pt.navigateTo({url: `/pages/personal/order/refund-detail/main?sku=${value}`})
      },
      pickUpEls(orderId) {
        this.$pt.navigateTo({ url: '/pages/personal/cancellation-desk/customer-details/main?orderId=' + orderId })
      },
      tabClick(e) {
        this.orders = []
        this.currentPage = 1
        this.activeIndex = e.mp.detail.index
        this.pullLoad.finished = false
        this.pageUserOrder()
      },
      goHome(memberId) {
        this.$utils.setMyId(memberId)
        this.$root.$mp.appOptions.query = {}
        this.$pt.reLaunch({ url: '/pages/home/main' })
      },
      getOrderDic() {
        getDict('UserOrderDTO.orderStatus').then((response) => {
          // console.log('订单状态字典')
          // console.log(response)
          if (response.isError) return
          this.orderStatusMap = response.data.orderStatus
          if ('20' in this.orderStatusMap) {
            // this.orderStatusMap['20'] = '待发货'
            this.orderStatusMap['20'] = '部分发货'
          }
          // console.log('-=-=-=-=-=')
          // console.log(this.orderStatusMap)
        }).catch(() => {
        })
      },
      pageUserOrder() {
        let orderStatus = ''
        switch (this.activeIndex) {
          default:
          case 0:
            // 全部
            orderStatus = ''
            break
          case 1:
            // 待付款
            orderStatus = '0'
            break
          case 2:
            // 待发货
            orderStatus = '1,20'
            break
          case 3:
            // 待收货
            orderStatus = '2'
            break
          case 4:
            // 已收货
            orderStatus = '3'
            break
          case 5:
            // 已完成
            orderStatus = '4'
            break
          case 6:
            // 已取消
            orderStatus = '-1,-2'
            break
        }
        const params = {
          customerMemberId: this.getCustomerId,
          orderStatusInfo: orderStatus,
          currentPage: this.currentPage,
          size: 10,
          deliveryType: this.deliveryType,
          crossBorderOrderType: this.orederCateIndex ? this.orederCateIndex : ''
        }
        if (!this.getShowBuyCard) {
          params.customerMemberId = 1
        }
        pageCustomerOrder(params).then((response) => {
          // console.log(response)
          if (response.isError) return
          response.data.records.forEach(item => {
            item.moreGoods = false
            item.goodsLength = 0
            item.statusOverNum = 0
            item.goodsListLen = item.orderGoodsList.length
            if ('deliveryType' in item) {
              let index = item.deliveryType - 1
              this.$set(item, 'deliveryTypeText', this.deliveryTypeArr[index])
            }
            this.$set(item, 'curStatusText', this.orderStatusMap[item.orderStatus])
            // 根据拆分订单id重组
            const apartOrderSet = new Set()
            item.orderGoodsList.forEach(value => {
              item.goodsLength += value.goodsNum
              apartOrderSet.add(value.apartOrderId)
              if (value.afterSaleStatus === -3 || value.afterSaleStatus === 4 || (value.afterSaleStatus === 3 && (value.afterSaleGoodsNum === value.goodsNum))) {
                item.statusOverNum++
              }
            })
            item.apartOrderIds = [...apartOrderSet]
            this.orders.push(item)
          })
          this.currentPage++
          if (this.orders.length === 0 || this.orders.length >= response.data.total) {
            this.pullLoad.finished = true
          }
        }).catch(() => {
        })
      },
      queryOrderInfo(order) {
        if (order.orderFrom === 1) {
          // 自营订单
          if ((order.orderStatus === 1 || order.orderStatus === 2) && order.orderGoodsDeliveryType === 11) {
            // 自营自提类型
            this.pickUpEls(order.orderId)
            return
          }
          // 自营快递类型
          this.$pt.navigateTo({ url: '/pages/personal/order/detail/main?orderId=' + order.orderId + '&orderFrom=' + order.orderFrom + '&orderType=' + order.deliveryType })
        } else {
          // 分销订单
          this.$pt.navigateTo({ url: '/pages/personal/distribution/order/detail/main?orderId=' + order.orderId +
           '&personalType=0&orderFrom=' + order.orderFrom + '&orderType=' + order.deliveryType })
          // this.$pt.navigateTo({ url: '/pages/personal/distribution/order/detail/main?orderId=' + order.orderId +
          //  '&personalType=0&orderFrom=' + order.orderFrom })
        }
      },
      doReceiveGoods(order) {
        if (order.orderStatus === 20) return
        const that = this
        this.$pt.showModal({
          content: '是否确认收货？',
          success(res) {
            if (res.confirm) {
              doReceiveGoods({
                memberId: order.memberId,
                orderId: order.orderId,
                orderFrom: order.orderFrom
              }).then(response => {
                if (response.isError) return
                that.$utils.showToast({ title: '确认收货成功' })
                that.orders = []
                that.currentPage = 1
                that.pullLoad.finished = false
                that.pageUserOrder()
              })
            } else if (res.cancel) {
              console.log('用户取消')
            }
          }
        })
      },
      cancelOrder(item) {
        // 取消订单事件
        // 订单里面都没有发货才可以取消订单，到订单取消页面
        // 否则提示联系卖家处理
        if (item.orderStatus === 0) {
          const that = this
          this.$pt.showModal({
            title: '温馨提示',
            content: '确认取消订单?',
            success: res => {
              if (res.confirm) {
                cancelOrder({orderId: item.orderId, orderFrom: item.orderFrom}).then(response => {
                  if (response.isError) return
                  that.$utils.showToast({ title: '取消成功' })
                  item.orderStatus = -1
                })
              }
            }
          })
        } else {
          checkCancelPaidOrder({orderId: item.orderId, orderFrom: item.orderFrom}).then(response => {
            if (response.isError) return
            this.$pt.navigateTo({url: '/pages/personal/order/cancel-order/main?memberId=' + item.memberId + '&orderId=' + item.orderId})
          })
        }
      },
      queryExpress(order) {
        // 根据拆分订单ID判断
        if (order.apartOrderIds.length > 1) {
          this.$pt.navigateTo({ url: `/pages/personal/order/express-view/main?orderId=${order.orderId}&orderFrom=${order.orderFrom}` })
        } else {
          this.$pt.navigateTo({ url: `/pages/personal/order/express-detail/main?orderId=${order.orderId}&orderFrom=${order.orderFrom}` })
        }
      },
      // 打开筛选层
      tabLayerShow() {
        this.tabLayer = true
      },
      // 关闭筛选层
      onPopupClose() {
        console.log(3)
        this.tabLayer = false
      },
      changeOrderCate(item, index) {
        this.orederCateIndex = index
        if (item === '跨境订单') {
          this.orderTypeList = ['全部', '物流快递']
          if (this.orederTypeIndex !== 4) {
            this.orederTypeIndex = 0
            this.deliveryType = ''
          } else {
            this.orederTypeIndex = 1
            this.deliveryType = 1
          }
        } else {
          this.orderTypeList = ['全部', '门店配送', '门店自提', '社区自提', '物流快递']
          if (this.orederTypeIndex === 1 && this.deliveryType === 1) {
            this.orederTypeIndex = 4
            this.deliveryType = 1
          }
        }
      },
      changeOrderType(index) {
        this.orederTypeIndex = index
        if (this.orderTypeList.length < 3) {
          switch (index) {
            case 0:
              this.deliveryType = ''
              break
            case 1:
              this.deliveryType = 1
              break
            default:
              this.deliveryType = ''
              break
          }
          return
        }
        switch (index) {
          case 0:
            this.deliveryType = ''
            break
          case 1:
            this.deliveryType = 5
            break
          case 2:
            this.deliveryType = 4
            break
          case 3:
            this.deliveryType = 3
            break
          case 4:
            this.deliveryType = 1
            break
          default:
            this.deliveryType = ''
            break
        }
      },
      changeOrderStatus(index) {
        this.activeIndex = index
      },
      resetCondition() {
        this.orders = []
        this.activeIndex = 0
        this.orederTypeIndex = 0
        this.deliveryType = ''
        this.currentPage = 1
        this.tabLayer = false
        this.pageUserOrder()
      },
      sureSerch() {
        this.currentPage = 1
        this.orders = []
        this.tabLayer = false
        this.pullLoad.finished = false
        this.pageUserOrder()
      }
    }
  }
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  overflow: hidden;
}
.ordet-type-tag{
  position: relative;
  width: 37px;
  height: 37px;
  background-color: #ff243d;
  color: #FFF;
  line-height: 1.3;
  font-size: 12px;
  // font-weight: bold;
  // letter-spacing: 2px;
  display: flex;
  align-items: center;
  text-align: center;
  padding: 0 2px;
  box-sizing: border-box;
  border-radius: 0 0 5px 5px;
  // writing-mode: vertical-rl;
  &::before{
    content: '';
    position: absolute;
    left: -3px;
    top: 0px;
    width: 0;
    height: 0;
    border-bottom: 4px solid #db041d;
    border-left: 3px solid transparent;
  }
  &::after{
    content: '';
    position: absolute;
    right: -3px;
    top: 0px;
    width: 0;
    height: 0;
    border-bottom: 4px solid #db041d;
    border-right: 3px solid transparent;
  }
}
.contactBtn {
  background-color: transparent !important;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  // z-index: 999;
  border-color: transparent !important;
  border: none !important;
}
.border-b-less {
  border-bottom: #f5f5f5 1px solid;
}
.border-b-less2 {
  border-bottom: #f2f2f2 1px solid;
}
.goods-list-item {
  &:last-child {
    .border-b-less2 {
      border-bottom: none;
    }
  }
}
.income-bar {
  background: #ffe1d1;
  display: inline-block;
  color: #ff5a00;
  padding: 0 3px;
  border-radius: 4px;
  line-height: unset;
}
.price-col-n {
  color: #343434;
}
.action-btn {
  color: #666;
  background-color: #fff;
  height: 24px !important;
  line-height: 24px !important;
  padding: 0px 15px !important;
  border: 1px solid #e9e9e9;
  border-radius: 50px;
}
.type-0 {
  color: #f94035;
}
.type-1 {
  color: #ff6600;
}
.type-2 {
  color: #409eff;
}
.type-3 {
  color: #ff6600;
}
.type-4 {
  color: #67c23a;
}
.type--10,
.type--11 {
  color: #ff6600;
}
.type--1 {
  color: #000;
}
.border-b {
  border-bottom: #e4e4e4 1px solid;
}
.barbg {
  background: #fafafa;
}
.orders-border {
  position: relative;
  &:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: #e6e6e6;
  }
  &:last-child {
    &:after {
      display: none;
    }
  }
}
.goods-prop {
  box-sizing: border-box;
  height: 16px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  word-break: break-word;
}
.order-div {
  background-color: #fff;
  border-radius: 5px;
  font-size: 13px;
  .delivery-type-tag {
    background: #f00;
    color: #fff;
    font-size: 12px;
    padding-left: 2px;
    padding-right: 2px;
    margin-right: 4px;
    border-radius: 2px;
  }
}
.goods-title {
  height: 35px;
  font-size: 13px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

.img-item {
  width: 100px;
  height: 100px;
}

.order-btn {
  background-color: #fff;
  color: #999999;
  font-size: 13px;
  line-height: 1;
  display: inline-block;
  padding: 6px 18px;
  border-radius: 50px;
  border: #cccccc 1px solid !important;
}
.order-btn2 {
  border: none !important;
  border: #ffe200 1px solid !important;
  background-color: #ffe200;
  color: #000;
  font-size: 13px;
  line-height: 1;
  display: inline-block;
  padding: 6px 25px;
  border-radius: 50px;
}
.disabled-order-btn2 {
  background: #dbdbdb !important;
  color: #fff !important;
  border: #dbdbdb 1px solid !important;
}
.btn-save {
  background-color: #f8c400;
}

.btn-border {
  border: 1px solid #969896;
  border-radius: 5px;
  height: 20px;
  background-color: #ffffff;
}
.tabs-bar {
  position: relative;
  min-height: 44px;
  padding-right: 70px;
  box-sizing: border-box;
  width: 100%;
  position: relative;
  z-index: 10;
  .tab-more{
    width: 50px;
    height: 25px;
    position: absolute;
    right: 0;
    top: 6px;
    z-index: 11;
    display: flex;
    align-items: center;
    padding-left: 5px;
    border-left: 2px solid #FFE793;
    &.tab-more-and{
      top: 3px;
    }
  }
}
.popup-layer{
  height: 100%;
  position: fixed;
  box-sizing: border-box;
  // padding-bottom: 70px;
  overflow-y: scroll;
  h3{
    line-height: 1;
    padding: 16px 15px 0;
    font-size: 15px;
    color: #333;
  }
  ul{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 5px 15px 0;
    li{
      // flex-shrink: 0;
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 calc(100% / 3);
      &:nth-child(3n + 1) {
        justify-content: flex-start;
      }
      &:nth-child(3n) {
        justify-content: flex-end;
      }
      .li-item{
        width: 76px;
        height: 32px;
        border-radius: 16px;
        background-color: #F5F5F5;
        font-size: 12px;
        color: #333;
        text-align: center;
        line-height: 32px;
        box-sizing: border-box;
          &.active{
          border: 1px solid #FFE200;
          background-color: #FFFBD8;
          width: 74px;
          height: 30px;
          line-height: 30px;
        }
      }
    }
  }
  .bottom-btn{
    // position: sticky;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    font-size: 16px;
    text-align: center;
    background-color: #fff;
    padding: 10px 15px;
    .reset-btn{
      width: 106px;
      height: 44px;
      border-radius: 22px;
      line-height: 44px;
      background-color: #F5F5F5;
      color: #666;
    }
    .comfirm-btn{
      width: 152px;
      height: 44px;
      line-height: 44px;
      border-radius: 22px;
      background-color: #FFE100;
      color: #333;
    }
  }
}
  .code-box {
    .alert-bg {
      background: #FF243D;
      border-radius:0px 0px 10px 10px;
    }
    .subject {
      align-items: center;
      .dots {
        margin-right: 4px;
        width: 4px;
        height: 4px;
        background: #fff;
        border-radius: 50%;
      }
    }
    .code-area {
      background: #fff;
      border-radius: 10px;
      position: relative;
      z-index: 10;
      // top: -57px;
      left: 50%;
      transform: translateX(-50%);
      box-shadow: 0px 1px 11px 0px rgba(255, 139, 152, 0.31);
    }
    .remark-text {
      margin-top: -35px;
      margin-bottom: 19px;
    }
  }
</style>
